<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/vue-resource.js"></script>
		<link rel="stylesheet" href="./css/bootstrap.css">
	</head>

	<body>
		<div id="app">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">添加品牌</h3>
				</div>
				<div class="panel-body form-inline">
					<label>id:<input type="text" v-model="id" class="form-control" /></label>
					<label>name:<input type="text" v-model="name" class="form-control" @keyup.enter="add" /></label>
					<label><input type="button" value="添加" @click="add" class="btn btn-default" /></label>
					<!-- placeholder：提示；autofocus：自动获取焦点 -->
					<label>搜索:<input type="text" class="form-control" v-model="keyword" placeholder="name模糊查询" autofocus="autofocus"
					/></label>
				</div>
			</div>
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>id</th>
						<th>name</th>
						<th>ctime</th>
						<th>operation</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in sourch(list)" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.ctime | dateFormat}}</td>
						<td>
							<a href="" @click.prevent="del(item.id)">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script>
		Vue.directive('color', {
			bind: function(el, binding) {
				el.style.color = binding.value
			}
		})

		Vue.filter("dateFormat", function(dateStr) {
			var dt = new Date(dateStr)
			var y = dt.getFullYear()
			//字符串填充函数：用于填充字符串，参数1为填充后的总长度，2为填充的字符
			//padStart：在头部填充，padEnd：在尾部填充
			var m = (dt.getMonth() + 1).toString().padStart(2, "0")
			var d = (dt.getDate()).toString().padStart(2, "0")
			//模板字符串
			return `${y}-${m}-${d}`
		})
		var vm = new Vue({
			el: "#app",
			data: {
				id: '',
				name: '',
				keyword: '',
				list: [{
						id: 1,
						name: '奔驰',
						ctime: new Date()
					},
					{
						id: 2,
						name: '宝马',
						ctime: new Date()
					},
					{
						id: 3,
						name: '法拉利',
						ctime: new Date()
					},
					{
						id: 4,
						name: '保时捷',
						ctime: new Date()
					},
					{
						id: 5,
						name: '劳斯莱斯',
						ctime: new Date()
					}
				]
			},
			methods: {
				add: function() {
					//this.list.unshift({id:this.id, name:this.name,ctime:new Date()})
					if(this.id == null || this.id == "" || this.name == null || this.name == "") {
						alert("id或者name不能为空")
					} else {
						this.list.push({
							id: this.id,
							name: this.name,
							ctime: new Date()
						})
					}
				},
				sourch() {
					var newList = []
					/*this.list.forEach(item => {
						//keyword为空时返回0
						if(item.name.indexOf(this.keyword) != -1) {
							newList.push(item);
						}
					})
					return newList*/
					//includes(str)将检查是否包含str，是返回true，否返回false
					newList = this.list.filter(item => {
						if(item.name.includes(this.keyword)) {
							return item
						}
					})
					return newList
				},
				del(id) {
					//根据id找到索引
					//调用数组的splice方法删除
					/*this.list.some((item, i) => {
						if(item.id == id) {
							this.list.splice(i, 1)
							//return true可以终止循环
							return true;
						}
					})*/
					var index = this.list.findIndex(item => {
						if(item.id == id) {
							return true
						}
					})
					this.list.splice(index, 1)
				},
				getAllList() {
					//导入Vue-resource.js,通过this.$http发起数据请求
					//this.$http.get('url').then(function(result）{})
					//通过then指定回调函数，可获取服务器返回的数据
					//判断result.status是否等于200,200为请求成功。
					//若是0，则将result.body赋值给this.list。若不是则提示获取数据失败
					this.$http.jsonp('http://localhost:8080/VueServer/server').then(function(result) {
							console.log(result)
							if(result.status === 200) {
								this.list = result.body
							} else {
								alert('获取数据失败')
							}
						})
				}
			},
			created() {
				this.getAllList()
			}
		});
	</script>
	<style>

	</style>

</html>